<template>
  <div class="drawerReflect">
    <el-drawer :visible="drawerReflectBoolen"
               title="提现审核"
               size="60%"
               :before-close="handleClose"
               ref="drawer">
      <el-card shadow="never">
        <div class="height83">
          <!-- 评论列表 -->
          <el-form label-position="top"
                   :model="form"
                   ref="form"
                   class="ruleForm">
            <div class="reflectList">
              <img class="avaterImg"
                   :src="drawerReflect?.avatar"
                   alt="" />
              <div class="commentInfo flex-column-between">
                <div class="nickName">
                  <span style="color: #000; font-weight: 400">{{
                    drawerReflect?.nickname
                  }}</span>
                </div>
                <div class="rate">
                  <el-tag type=""
                          v-if="drawerReflect?.status == 1"
                          size="small">提现中</el-tag>
                  <el-tag type="success"
                          v-if="drawerReflect?.status == 2"
                          size="small">提现完成</el-tag>
                  <el-tag type="danger"
                          v-if="drawerReflect?.status == 3"
                          size="small">已驳回</el-tag>
                </div>
              </div>
            </div>
            <!-- 体现展示信息 -->
            <div class="padding20">
              <div class="flex-start"
                   v-if="drawerReflect.status!==3">
                <div class="display">
                  <div class="reflectListLeft">
                    <div>提现金额</div>
                    <div>申请时间</div>
                    <div>订单编号</div>
                    <div>提现状态</div>
                  </div>
                  <div :class="[
                      form.examineStatus == '2'
                        ? 'flex-column-between reflectListRight  reflectRight'
                        : 'flex-column-between reflectListRight'
                    ]">
                    <div style="height: 142px"
                         class="flex-column-between">
                      <div style="color: red">￥{{ drawerReflect?.withdrawAmount }}</div>
                      <div>{{formattedDate(drawerReflect?.createdAt)  }}</div>
                      <div>{{ drawerReflect?.withdrawOrderNumber }}</div>
                      <div v-if="drawerReflect.status!==3">
                        <el-radio-group v-model="form.examineStatus">
                          <el-radio label="1"
                                    @change="remarkFn"
                                    value="1">同意</el-radio>
                          <el-radio label="2"
                                    value="2"
                                    @change="remarkFn">驳回</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="display">
                  <div class="reflectListLeft">
                    <div>到账金额</div>
                    <div>手续费</div>
                    <div>提现方式</div>
                    <div>提现账户</div>
                  </div>
                  <div class="flex-column-between reflectListRight">
                    <div>￥{{ drawerReflect?.withdrawActualAmount }}</div>
                    <div>￥{{ drawerReflect?.serviceCharge }}</div>
                    <div :class="[
                        drawerReflect?.enabledNot == 1
                          ? 'payZfbIcon'
                          : 'payWxIcon'
                      ]">
                      {{
                        drawerReflect?.enabledNot == 1
                          ? '支付宝支付'
                          : '微信支付'
                      }}</div>
                    <div>{{
                      drawerReflect?.withdrawAccount
                        ? drawerReflect?.withdrawAccount
                        : '----'
                    }}</div>
                  </div>
                </div>
              </div>
              <div v-show="showRemark||drawerReflect.status==3">
                <div style="margin-bottom: 20px">驳回原因</div>
                <el-input type="textarea"
                          :disabled="true"
                          maxlength="50"
                          resize="none"
                          show-word-limit
                          placeholder="提现金额和提现记录对不上"
                          v-model="form.remark"></el-input>
              </div>
              <!-- 佣金来源 -->
              <!-- <commissionSource :withdrawalRecordsId=drawerReflect.id></commissionSource> -->
            </div>
          </el-form>
        </div>
        <div class="drawer__footer">
          <div class="drawerFooterRight">
            <el-button round
                       type="plain"
                       @click="handleClose"
                       size="medium">返回</el-button>
            <el-button v-if="drawerReflect.status!==3"
                       type="primary"
                       round
                       :loading="loading"
                       size="medium"
                       @click="save">确定</el-button>
          </div>
        </div>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>
import moment from 'moment'
import { technicianWithdrawal } from '@/api/withdrawalManagement/withdrawalList/index';
// import commissionSource from './commissionSource.vue'
export default {
  name: 'drawerReflect',
  props: {
    drawerReflectBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  components: {
    // 佣金来源
    // commissionSource
  },

  data () {
    return {
      loading: false,
      isUpdate: false,
      drawerReflect: null,
      showRemark: false,
      form: {
        // 提现状态 1 同意 2 不同意
        examineStatus: '1',
        remark: '提现金额和提现记录对不上',
        siteId: this.$store.state.site.info.id,
        id: null,
        withdrawAmount: null,
        userId: this.drawerReflect?.userId,
        enabledNot: this.drawerReflect?.enabledNot
          ? this.drawerReflect?.enabledNot
          : '',
        withdrawAccount: null
      }
    };
  },
  computed: {
    // 时间格式化
    formattedDate () {
      return (params) => {
        const currentDate = moment(params);
        const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
        return formattedDate;
      };
    },
  },
  methods: {
    // 关闭抽屉
    handleClose () {
      console.log('评论');
      this.$emit('update:drawerReflectBoolen', false);
    },
    // 驳回回调
    remarkFn (val) {
      console.log(val);

      if (val == 2) {

        this.showRemark = true;
      } else {
        this.showRemark = false;
      }
    },
    save () {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        const data = {
          ...this.form
        };
        console.log(data);
        if (this.form.examineStatus == 1) {
          data.withdrawAmount = this.drawerReflect.withdrawActualAmount;
          data.remark = null;
        } else {
          //   data.userId = null;
          //   data.siteId = null
          data.remark = '提现金额和提现记录对不上'
        }
        if (data.examineStatus == 2) {
          data.enabledNot = '';
        }
        if (this.drawerReflect.enabledNot == 1) {
          data.withdrawAccount = this.drawerReflect.withdrawAccount;
        }
        console.log(data)
        this.loading = true;
        technicianWithdrawal(data)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');

          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    }
  },
  watch: {
    drawerReflectBoolen (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.data);
          if (this.data) {
            this.form.id = this.data.id;
            this.form.enabledNot = this.data.enabledNot;
            this.drawerReflect = this.data;
            this.form.userId = this.data.userId;
            this.form.remark = this.data.reasonForRejection;
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form);
          });
        }
      });
    }
  }
};
</script>
<style lang="less">
/deep/.el-textarea__inner {
  height: 100px;
}
.drawerReflect {
  .reflectList {
    display: flex;
    padding: 14px 0;
    border-bottom: 1px solid #d9d9d9;
    margin: 0 20px;
    .avaterImg {
      width: 50px;
      height: 50px;
      border-radius: 46px;
      margin-right: 10px;
    }
    .commentInfo {
      width: 100%;
    }
  }
  /deep/.el-textarea__inner {
    height: 150px;
  }
  .height83 {
    height: 83vh;
  }
  .drawer__footer {
    display: flex;
    justify-content: flex-start;
    margin-left: 15px;
  }
  .padding20 {
    // padding: 20px;
    .reflectListLeft {
      padding: 0px 0 0px 0px;
      div {
        margin-bottom: 22px;
      }
    }
    .reflectRight {
      margin-bottom: 0px !important ;
    }
    .reflectListRight {
      padding: 0px 0 24px 20px;
      margin-bottom: 0px;
      margin-right: 50px;
      /deep/.el-textarea__inner {
        margin-top: 25px !important;
      }
      .payZfbIcon {
        &::before {
          content: '';
          background-image: url('../../../../assets/Group\ 3170.png');

          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 2px;
          border-radius: 50%;
        }
      }
      .payWxIcon {
        &::before {
          content: '';
          background-image: url('../../../../assets/Group\ 3171.png');

          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 2px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
